<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>URL 解析工具</title>
    <style>
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
            background-color: #f5f5f5;
        }

        .container {
            background-color: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }

        .url-display {
            margin: 20px 0;
            padding: 15px;
            background-color: #f8f9fa;
            border-radius: 4px;
            border: 1px solid #dee2e6;
            word-break: break-all;
        }

        .url-components {
            margin: 20px 0;
        }

        .component-item {
            margin: 10px 0;
            padding: 10px;
            background-color: #fff;
            border: 1px solid #dee2e6;
            border-radius: 4px;
        }

        .params-table {
            width: 100%;
            border-collapse: collapse;
            margin: 20px 0;
        }

        .params-table th,
        .params-table td {
            padding: 12px;
            text-align: left;
            border-bottom: 1px solid #dee2e6;
        }

        .params-table th {
            background-color: #f8f9fa;
        }

        .button-group {
            display: flex;
            gap: 10px;
            margin: 20px 0;
        }

        button {
            padding: 8px 16px;
            border: none;
            border-radius: 4px;
            background-color: #007bff;
            color: white;
            cursor: pointer;
            transition: background-color 0.2s;
        }

        button:hover {
            background-color: #0056b3;
        }

        .toast {
            position: fixed;
            bottom: 20px;
            right: 20px;
            padding: 10px 20px;
            background-color: #28a745;
            color: white;
            border-radius: 4px;
            display: none;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>URL 解析工具</h1>
        
        <div class="url-display" id="currentUrl"></div>
        
        <div class="button-group">
            <button onclick="copyToClipboard()">复制 URL</button>
            <button onclick="shareURL()">分享</button>
        </div>

        <div class="url-components">
            <h2>URL 组成部分</h2>
            <div class="component-item" id="protocol"></div>
            <div class="component-item" id="hostname"></div>
            <div class="component-item" id="pathname"></div>
            <div class="component-item" id="hash"></div>
        </div>

        <div class="url-params">
            <h2>URL 参数</h2>
            <table class="params-table">
                <thead>
                    <tr>
                        <th>参数名</th>
                        <th>参数值</th>
                    </tr>
                </thead>
                <tbody id="paramsBody"></tbody>
            </table>
        </div>
    </div>

    <div class="toast" id="toast">复制成功！</div>

    <script>
        const currentURL = () => window.location.href;

        function updateURLInfo() {
            const url = new URL(currentURL());
            document.getElementById('currentUrl').textContent = url.href;
            document.getElementById('protocol').textContent = `协议：${url.protocol}`;
            document.getElementById('hostname').textContent = `域名：${url.hostname}`;
            document.getElementById('pathname').textContent = `路径：${url.pathname}`;
            document.getElementById('hash').textContent = `锚点：${url.hash || '无'}`;

            const paramsBody = document.getElementById('paramsBody');
            paramsBody.innerHTML = '';
            url.searchParams.forEach((value, key) => {
                const row = document.createElement('tr');
                row.innerHTML = `
                    <td>${key}</td>
                    <td>${value}</td>
                `;
                paramsBody.appendChild(row);
            });
        }

        function copyToClipboard() {
            navigator.clipboard.writeText(currentURL())
                .then(() => showToast('复制成功！'))
                .catch(() => showToast('复制失败，请手动复制'));
        }

        function shareURL() {
            if (navigator.share) {
                navigator.share({
                    title: document.title,
                    url: currentURL()
                }).catch(console.error);
            } else {
                copyToClipboard();
            }
        }

        function showToast(message) {
            const toast = document.getElementById('toast');
            toast.textContent = message;
            toast.style.display = 'block';
            setTimeout(() => {
                toast.style.display = 'none';
            }, 3000);
        }

        // 初始化页面
        updateURLInfo();

        // 监听 URL 变化
        window.addEventListener('hashchange', updateURLInfo);
        window.addEventListener('popstate', updateURLInfo);
    </script>
</body>
</html>